<template>
  <a-drawer
    :visible="self_visible"
    v-bind="$attrs"
    :title="title"
    :placement="placement"
    :mask-closable="closeable"
    class="basic-drawer"
    :width="width"
    :header="header"
    :footer="footer"
    :ok-text="okText"
    :cancel-text="cancelText"
    :ok-loading="loading"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
    @before-open="handleOpen"
    @before-close="handleClose"
    @close="handleClose">
    <template #title> {{ title }} </template>
    <template #header>
      <slot name="header"></slot>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
interface IProps {
  visible?: boolean
  loading?: boolean
  width?: string | number
  title?: string
  placement?: 'top' | 'bottom' | 'left' | 'right'
  closeable?: boolean
  okText?: string
  cancelText?: string
  header?: boolean
  footer?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  loading: false,
  okText: '确定',
  cancelText: '取消',
  title: '',
  width: '1000px',
  placement: 'right',
  closeable: false,
  header: true,
  footer: true
})
interface IEmits {
  (event: 'update:modelValue', value: boolean): void
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'ok'): void
  (event: 'cancel'): void
  (event: 'open'): void
  (event: 'close'): void
}
const emit = defineEmits<IEmits>()
// 子组件定义自己的visible
const self_visible = computed({
  get: () => props.visible,
  set: (value) => {
    emit('update:modelValue', value)
  }
})
const handleOk = () => {
  try {
    emit('update:loading', true)
    emit('ok')
    emit('update:visible', false)
  } finally {
    emit('update:loading', false)
  }
}
const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}
const handleOpen = () => {
  emit('open')
}
const handleClose = () => {
  emit('close')
}
</script>

<style lang="less" scoped></style>
